<template>
  <div>
    <div
        style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img alt="" src="@/assets/imgs/logo.png" style="width: 80px;height: 80px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">AIOps</div>
        </div>
      </div>
      <el-popover class="userBar"
                  placement="bottom"
                  trigger="click"
      >
        <div class="userNav">
          <div class="info" @click="handleUserInfo">
            <el-icon :size="16">
              <User/>
            </el-icon>
            <span>个人中心</span></div>
          <div class="info" @click="handleLogout">
            <el-icon :size="16">
              <SwitchButton/>
            </el-icon>
            <span>退出登录</span></div>
        </div>
        <template #reference>
          <div class="userInfo">
            <img :src="userInfo.avatar || '@/assets/imgs/square.png'" alt=""
                 style="width: 40px; height: 40px; border-radius: 50%;margin-right: 10px">
            <span style="margin-left: 5px">{{ userInfo.nickname || '账号未登录' }}</span>
          </div>
        </template>
      </el-popover>
    </div>

    <div style="display: flex">
      <el-scrollbar
          style="height: calc(100vh - 60px);width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu
            :default-active="$route.path"
            router
            style="border: none"
        >
<!--          <el-menu-item index="/home">-->
<!--            <el-icon>-->
<!--              <HomeFilled/>-->
<!--            </el-icon>-->
<!--            <span>系统首页</span>-->
<!--          </el-menu-item>-->
          <el-menu-item index="/team/info">
            <el-icon>
              <User/>
            </el-icon>
            <span>团队空间</span>
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Odometer/>
              </el-icon>
              <span>指标管理</span>
            </template>
            <el-menu-item index="/dashboard/info">
              <span>指标配置</span>
            </el-menu-item>
            <!-- <el-menu-item index="/dashboard/IndicatorDisplay">
              <span>指标展示</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="/dashboard/info">
              <span>仪表盘管理</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="/dashboard/create">
              <span>新建仪表盘</span>
            </el-menu-item> -->
            <el-menu-item index="/dashboard/view">
              <span>指标展示</span>
            </el-menu-item>
            <!-- <el-menu-item index="/dashboard/bigscreen">
              <span>大屏显示器</span>
            </el-menu-item> -->
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <MessageBox/>
              </el-icon>
              <span>日志</span>
            </template>
            <el-menu-item index="/log/realtime">
              <span>日志查询</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Cloudy/>
              </el-icon>
              <span>部署管理</span>
            </template>
            <el-menu-item index="/deployment/category">
              <span>技术组件监控</span>
            </el-menu-item>
            <el-menu-item index="/deployment/systemLogMonitoring">
              <span>系统日志监控</span>
            </el-menu-item>
            <el-menu-item index="/deployment/host">
              <span>主机部署</span>
            </el-menu-item>
            <el-menu-item v-if="false" index="/deployment/release">
              <span>部署发布</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Document/>
              </el-icon>
              <span>自动报告</span>
            </template>
            <el-menu-item index="/autoLog/info">
              <span>自动报告管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Bell/>
              </el-icon>
              <span>智能告警</span>
            </template>
            <el-menu-item index="/alert/config">
              <span>配置告警规则</span>
            </el-menu-item>
            <el-menu-item index="/alert/action">
              <span>告警动作</span>
            </el-menu-item>
            <el-menu-item index="/alert/log">
              <span>告警日志</span>
            </el-menu-item>
          </el-sub-menu>


        </el-menu>
      </el-scrollbar>

      <el-scrollbar style="flex: 1; width: 0;height: calc(100vh - 60px); background-color: #F2F3F5">
        <router-view/>
      </el-scrollbar>
    </div>

  </div>
</template>

<script name="Layout" setup>
import {computed, onMounted} from "vue";
import useUserInfoStore from "@/stores/userInfo";
import router from "@/router";
import {loginOut, sendHardAlert} from "@/api/login";

const userInfo = computed(() => useUserInfoStore().user || {})


onMounted(() => {
  setInterval(
      () => {
        sendHardAlert();
      },
      30000
  )
})

// 个人中心
function handleUserInfo() {
  router.push('/user/update')
}

// 退出登录
function handleLogout() {
  loginOut().then(res => {
    if (res.data) {
      useUserInfoStore().deleteUserCache()
      useUserInfoStore().removeToken()
      router.push('/login')
    }
  })
}
</script>

<style lang="scss" scoped>
.el-menu-item.is-active {
  background-color: #dcede9 !important;
}

.el-menu-item:hover {
  color: #11A983;
}

:deep(th) {
  color: #333;
}

:deep(.el-tooltip__trigger) {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: 0 10px;
}

.userInfo {
  min-width: 120px;
  height: 60px;
  display: flex;
  align-items: center;
}

.userNav {

  .info {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .info:hover {
    background-color: #ddd;
  }
}

:deep(.el-tooltip__trigger):hover {
  background-color: #ddd !important;;
}
</style>